<script>
	import { getValue } from '$utils/get';

	export let info_double = [];
	export let info_single = [];
</script>

<div class="flex-1 flex flex-col">
	<div class="flex-1 grid grid-cols-2 gap-5px ml-20px">
		{#each info_double as item}
			<div class="flex flex-row items-center gap-10px mb-1">
				<span class="material-symbols-outlined"> {item.icon} </span>
				<span class="prop-name">{item.name}</span>
				<span class="prop-value color-gray-5">{getValue(item, 'value', '--')}</span>
			</div>
		{/each}
	</div>
	<div class="flex-1 grid grid-cols-1 gap-5px ml-20px mt-5px">
		{#each info_single as item}
			<div class="flex flex-row items-center gap-10px mb-1">
				<span class="material-symbols-outlined"> {item.icon} </span>
				<span class="prop-name">{item.name}</span>
				{#if item.handle}
					<span class="prop-value color-gray-5">{@html getValue(item, 'value', '--')}</span>
				{:else}
					<span class="prop-value color-gray-5">{getValue(item, 'value', '--')}</span>
				{/if}
			</div>
		{/each}
	</div>
</div>

<style lang="scss">
	.material-symbols-outlined {
		color: var(--color-text);
	}
</style>
